import React, { useState, useEffect, useMemo } from 'react';
import cn from 'classnames';
import { Link } from 'react-router-dom';
// import s from './style.module.css';
import s from './styleOld.module.css';
import Menu from '@knownsec/react-component/dist/Menu';
import { withRouter } from 'react-router-dom';

const { SubMenu } = Menu;
const icon1 = (
	<svg
		style={{ pointerEvents: 'none' }}
		width="37px"
		height="13px"
		viewBox="0 0 37 13"
		version="1.1"
		xmlns="http://www.w3.org/2000/svg"
		xmlnsXlink="http://www.w3.org/1999/xlink"
	>
		<defs>
			<linearGradient
				x1="50%"
				y1="0%"
				x2="50%"
				y2="100%"
				id="linearGradient-1-host"
			>
				<stop stopColor="#FFDE84" offset="0%"></stop>
				<stop stopColor="#E36E00" offset="100%"></stop>
			</linearGradient>
			<path
				d="M11.438,10.112 L11.718,8.208 L11.074,8.74 L10.836,8.74 L10.514,3.154 L12.25,3.154 L12.446,1.796 L10.444,1.796 L10.346,0.06 L8.008,0.06 L8.344,0.424 L8.414,1.796 L4.55,1.796 L4.354,3.154 L8.484,3.154 L8.848,10.112 L11.438,10.112 Z M12.376,1.558 L12.236,0.284 L10.542,0.284 L10.696,1.558 L12.376,1.558 Z M3.794,2.174 L3.444,0.312 L1.484,0.312 L1.82,2.174 L3.794,2.174 Z M0.434,10.07 L3.43,9.132 L3.654,7.55 L2.954,7.844 L3.654,2.944 L0.784,2.944 L0.588,4.316 L1.246,4.316 L0.434,10.07 Z M3.598,9.832 L7.966,9.342 L8.162,7.984 L7.056,8.11 L7.392,5.632 L8.246,5.632 L8.428,4.302 L4.452,4.302 L4.27,5.632 L5.222,5.632 L4.844,8.362 L3.794,8.474 L3.598,9.832 Z M16.6413335,1.908 L16.0673335,0.312 L13.9393335,0.312 L14.5133335,1.908 L16.6413335,1.908 Z M24.1313335,1.642 L24.3133335,0.326 L17.9293335,0.326 L17.7473335,1.642 L24.1313335,1.642 Z M14.9893335,9.888 L15.1993335,9.482 L16.5853335,9.888 L24.0333335,9.888 L24.2153335,8.558 L17.7053335,8.558 L15.7873335,7.984 L16.5713335,2.44 L13.6453335,2.44 L13.4493335,3.77 L13.9813335,3.77 L13.3233335,8.502 L12.5953335,9.888 L14.9893335,9.888 Z M23.7673335,8.026 L23.3753335,5.1 L21.2473335,5.1 L21.4293335,6.486 L19.4973335,6.57 L20.7153335,4.302 L24.2853335,4.302 L24.4673335,2.972 L17.0193335,2.972 L16.8373335,4.302 L18.0553335,4.302 L16.7673335,6.696 L16.5993335,7.9 L21.5833335,7.662 L21.6393335,8.026 L23.7673335,8.026 Z M25.106667,2.314 L28.816667,1.642 L29.040667,0.046 L25.330667,0.718 L25.106667,2.314 Z M36.236667,1.698 L36.432667,0.326 L30.188667,0.326 L29.992667,1.698 L36.236667,1.698 Z M27.612667,10.126 L28.508667,3.77 L28.732667,2.174 L25.036667,2.846 L24.812667,4.442 L25.904667,4.246 L25.078667,10.126 L27.612667,10.126 Z M32.582667,10.112 C32.8440004,10.112 33.0820004,10.0256667 33.296667,9.853 C33.5113337,9.68033333 33.6373337,9.45866667 33.674667,9.188 L33.674667,9.188 L34.290667,4.778 L36.222667,4.778 L36.418667,3.392 L29.362667,3.392 L29.166667,4.778 L31.630667,4.778 L31.070667,8.81 L29.810667,10.112 L32.582667,10.112 Z"
				id="path-2"
			></path>
		</defs>
		<g id="页面-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
			<g id="试运行" fillRule="nonzero">
				<use fill="#FFFFFE" xlinkHref="#path-2"></use>
				<use fill="url(#linearGradient-1-host)" xlinkHref="#path-2"></use>
			</g>
		</g>
	</svg>
);
const icon2 = (
	<svg
		style={{ pointerEvents: 'none' }}
		width="37px"
		height="11px"
		viewBox="0 0 37 11"
		version="1.1"
		xmlns="http://www.w3.org/2000/svg"
		xmlnsXlink="http://www.w3.org/1999/xlink"
	>
		<defs>
			<linearGradient
				x1="50%"
				y1="0%"
				x2="50%"
				y2="100%"
				id="linearGradient-2-host"
			>
				<stop stopColor="#FFDE84" offset="0%"></stop>
				<stop stopColor="#E36E00" offset="100%"></stop>
			</linearGradient>
			<path
				d="M11.438,10.112 L11.718,8.208 L11.074,8.74 L10.836,8.74 L10.514,3.154 L12.25,3.154 L12.446,1.796 L10.444,1.796 L10.346,0.06 L8.008,0.06 L8.344,0.424 L8.414,1.796 L4.55,1.796 L4.354,3.154 L8.484,3.154 L8.848,10.112 L11.438,10.112 Z M12.376,1.558 L12.236,0.284 L10.542,0.284 L10.696,1.558 L12.376,1.558 Z M3.794,2.174 L3.444,0.312 L1.484,0.312 L1.82,2.174 L3.794,2.174 Z M0.434,10.07 L3.43,9.132 L3.654,7.55 L2.954,7.844 L3.654,2.944 L0.784,2.944 L0.588,4.316 L1.246,4.316 L0.434,10.07 Z M3.598,9.832 L7.966,9.342 L8.162,7.984 L7.056,8.11 L7.392,5.632 L8.246,5.632 L8.428,4.302 L4.452,4.302 L4.27,5.632 L5.222,5.632 L4.844,8.362 L3.794,8.474 L3.598,9.832 Z M16.6413335,1.908 L16.0673335,0.312 L13.9393335,0.312 L14.5133335,1.908 L16.6413335,1.908 Z M24.1313335,1.642 L24.3133335,0.326 L17.9293335,0.326 L17.7473335,1.642 L24.1313335,1.642 Z M14.9893335,9.888 L15.1993335,9.482 L16.5853335,9.888 L24.0333335,9.888 L24.2153335,8.558 L17.7053335,8.558 L15.7873335,7.984 L16.5713335,2.44 L13.6453335,2.44 L13.4493335,3.77 L13.9813335,3.77 L13.3233335,8.502 L12.5953335,9.888 L14.9893335,9.888 Z M23.7673335,8.026 L23.3753335,5.1 L21.2473335,5.1 L21.4293335,6.486 L19.4973335,6.57 L20.7153335,4.302 L24.2853335,4.302 L24.4673335,2.972 L17.0193335,2.972 L16.8373335,4.302 L18.0553335,4.302 L16.7673335,6.696 L16.5993335,7.9 L21.5833335,7.662 L21.6393335,8.026 L23.7673335,8.026 Z M25.106667,2.314 L28.816667,1.642 L29.040667,0.046 L25.330667,0.718 L25.106667,2.314 Z M36.236667,1.698 L36.432667,0.326 L30.188667,0.326 L29.992667,1.698 L36.236667,1.698 Z M27.612667,10.126 L28.508667,3.77 L28.732667,2.174 L25.036667,2.846 L24.812667,4.442 L25.904667,4.246 L25.078667,10.126 L27.612667,10.126 Z M32.582667,10.112 C32.8440004,10.112 33.0820004,10.0256667 33.296667,9.853 C33.5113337,9.68033333 33.6373337,9.45866667 33.674667,9.188 L33.674667,9.188 L34.290667,4.778 L36.222667,4.778 L36.418667,3.392 L29.362667,3.392 L29.166667,4.778 L31.630667,4.778 L31.070667,8.81 L29.810667,10.112 L32.582667,10.112 Z"
				id="path-2"
			></path>
		</defs>
		<g id="页面-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
			<g id="试运行" fillRule="nonzero">
				<use fill="#FFFFFE" xlinkHref="#path-2"></use>
				<use fill="url(#linearGradient-2-host)" xlinkHref="#path-2"></use>
			</g>
		</g>
	</svg>
);

const NavDataAdmin = [
  // icon: 'monitor' 可添加图标
  // children 二级菜单
  // subChildren 内页
  {
    title: '安全概览',
    link: '/',
  },
  {
    title: '资产管理',
		children: [
			{
        title: 'Web资产',
        link: '/asset-manage/manage/web',
				subChildren: [
					'/asset-manage/manage/:assetType/Detail',
					'/asset-manage/manage/batch_add/:assetType',
					'/asset-manage/manage/web/vul-detail',
					'/asset-manage/manage/web/change-check-detail',
					'/asset-manage/manage/web/ssl-detail',
					'/asset-manage/manage/web/securityEvent-detail/:taskId/DetailP',
					'/asset-manage/manage/web/content-detail/:taskId/DetailC',
				]
      },
      {
        title: '主机资产',
				titleHtml: true,
        link: '/asset-manage/manage/host',
				subChildren: ['/asset-manage/manage/host/host-task/detail']
      },
    ],
  },
	{
		title: '任务管理',
		children: [
			{
				title: 'Web安全监测',
				link: '/job-manage/web-task',
				subChildren: [
					'/job-manage/create-job-all',
					'/job-manage/web-task/detail',
					'/job-manage/web-task/vul-detail',
					'/job-manage/web-task/change-check-detail',
					'/job-manage/web-task/ssl-detail',
					'/job-manage/web-task/content-detail/:taskId/DetailC',
					'/job-manage/web-task/securityEvent-detail/:taskId/DetailP',
					'/job-manage/web-task/history'
				]
			},
			{
				title: '主机安全监测',
				titleHtml: true,
				link: '/job-manage/host-task',
				subChildren: [
					'/job-manage/host-task/detail',
					'/job-manage/host-task/vul-detail'
				]
			}, {
				title: '可用性监测',
				link: '/job-manage/aviliable-task',
				subChildren: [
					'/job-manage/aviliable-task/detail'
				]
			}, {
				title: 'IPv6合规检测',
				link: '/job-manage/ipv6-monitor',
				subChildren: [
					'/job-manage/ipv6-monitor/detail/:id',
					'/job-manage/ipv6-monitor/linkDetail/:id/:type'
				]
			}
		]
	},
	{
		title: '网站画像',
		link: '/site-portrait',
	},
	{
		title: '云防联动',
		link: '/yfld',
		subChildren: ['/yfld/whitelist', '/yfld/blacklist/:type']
	},
	{
		title: '报表中心',
		children: [
			{
				title: '数据报表',
				link: '/dashboard/center/:jobId/weakness'
			},
			{
				title: '报告下载',
				link: '/dashboard/downList'
			}
		]
	},
	{
		title: '告警中心',
		children: [
			{
				title: '告警列表',
				link: '/alert/list/vul'
			},
			{
				title: '告警设置',
				link: '/alert/settings/alert-group'
			}
		]
	},
	{
		title: '综合管理',
		children: [
			{
				title: '已忽略威胁',
				link: '/policy-manage/ignore-risk-manage',
				subChildren: ['/policy-manage/ignore-risk-detail']
			},
			{
				title: '敏感词策略',
				link: '/policy-manage/keyword-settings/library'
			},
			{
				title: 'API管理',
				link: '/policy-manage/api-page'
			},
			{
				title: '漏洞模板',
				link: '/policy-manage/vul-template-settings/list',
				subChildren: ['/policy-manage/vul-template-settings/create']
			},
      {
				title: '篡改策略',
				link: '/policy-manage/change-check-pages/list',
			},
			{
				title: '操作日志',
				link: '/policy-manage/general/operation-log'
			}
		]
	},
	{
		title: '漏洞库',
		link: '/general/bug-store'
	}
];
function Nav({location, balance}) {
  let pathName = location?.pathname
  const mathKey = NavDataAdmin.reduce((total, item, index) => {
    if (item.children) {
      item.children.map(i => {
        if (i.subChildren) {
          i.subChildren.map(s => {
            if (typeof s === 'object') {
                if (s.test(location?.pathname + location?.search)) { // 子页面共用时通过url匹配正则确认高亮菜单
                    total = index
                    pathName = i.link
                }
            } else {
                if (pathName.includes(s)) {
                    total = index
                    pathName = i.link
                }
            }
          })
        }
				if (i.link === pathName) {
					total = index
				}
      })
    } else {
        if (item.subChildren) {
            item.subChildren.map(s => {
                if (typeof s === 'object') {
                    if (s.test(location?.pathname + location?.search)) {
                        total = index
                        pathName = item.link
                    }
                } else {
                    if (pathName.includes(s)) {
                        total = index
                        pathName = item.link
                    }
                }
            })
        }
				if (item.link === pathName) total = index
    }
    return total
  }, 0)
  const [openKeys, setOpenKeys] = useState(('' + mathKey) || '');
  const [collapsed, setCollapsed] = useState(false);
  const [navData, setNavData] = useState(NavDataAdmin);
  const selIcon = useMemo(() => {
    return pathName.replace('/', '')
  }, [pathName])
  const Navicon = (icon) => {
    if (selIcon.includes(icon)) {
      return <div className={cn(s.baseSel, icon ? s[icon] : '')}></div>;
    } else {
      return <div className={cn(s.baseNoSel, icon ? s[icon] : '')}></div>;
    }
  };
	const NavHtml = name => {
		if (name === '主机资产') {
			return <div style={{ position: 'relative' }}>
				主机资产
				<span
					style={{
						position: 'absolute',
						right: '35px',
						top: '4px',
					}}
				>
					{icon1}
				</span>
			</div>
		} else if (name === '主机安全监测') {
			return <div style={{ position: 'relative' }}>
				主机安全监测
				<span
					style={{
						position: 'absolute',
						right: '5px',
						top: '2px',
					}}
				>
					{icon2}
				</span>
			</div>
		}
	}
  useEffect(() => {
		if (mathKey) setOpenKeys('' + mathKey)
		if (location?.pathname?.includes('message')) {
			setNavData( [
				{
					title: '消息中心',
					children: [
						{
							title: '告警通知',
							link: '/message/notification-centre',
							subChildren: ['/message/notification-centre/:id']
						},
						{
							title: '漏洞速递',
							link: '/message/vul-centre',
						},{
							title: '服务公告',
							link: '/message/system-centre',
						}
					],
				},])
			setOpenKeys('' + 0)
		} else {
			setNavData(NavDataAdmin)
		}
	}, [location]);
	useEffect(() => {
		const data = JSON.parse(JSON.stringify(NavDataAdmin))
		data.map(i => {
			if ((!balance?.balance?.api || balance?.balance?.api?.time <= 0) && i.title === '综合管理') { // api管理
				i.children.splice(2, 1)
			}
		})
		setNavData(data)
	}, [])
	useEffect(() => {
		if (mathKey + '' !== openKeys) {
			setOpenKeys(mathKey + '')
		}
	}, [mathKey])
  return (
    <Menu
      openKeys={[openKeys]}
      selectedKeys={pathName}
      mode="inline"
      theme="dark"
      inlineCollapsed={collapsed}
      className={s.navBox}
      multiple={false}
      onOpenChange={(e) => {
        setOpenKeys(e.pop())
      }}
      style={collapsed ? {width: '80px'} : {width: '152px'}}
      onClick={(item) => {
        if (item.keyPath.length === 1) setOpenKeys('')
      }}
    >
      {/* <div
        className={s.navBtn}
        onClick={e => {
          if (e.target.getAttribute('id') === 'collIcon') {
            setCollapsed(!collapsed);
            if (collapsed) {
              e.target.parentNode.parentNode.parentNode.nextSibling.style.minWidth = 'calc(100% - 152px)'
              e.target.parentNode.parentNode.parentNode.nextSibling.style.marginLeft = '152px'
            } else {
              e.target.parentNode.parentNode.parentNode.nextSibling.style.minWidth = 'calc(100% - 80px)'
              e.target.parentNode.parentNode.parentNode.nextSibling.style.marginLeft = '80px'
            }
          }
        }}
      >
        <div
          className={s.navImg}
          id="collIcon"
          style={{ 'background-position': collapsed ? '100% 0' : '90% 0' }}
        ></div>
      </div> */}
      {navData.map((e, i) => {
        if (e.children) {
          return (
            <SubMenu key={i} icon={e.icon ? Navicon(e.icon) : ''} title={e.title} className={s.Menu}>
              {e.children.map((e_) => {
                return (
                  <Menu.Item key={e_.link}>
                    <Link to={e_.link}>{e_.titleHtml ? NavHtml(e_.title) : e_.title}</Link>
                  </Menu.Item>
                );
              })}
            </SubMenu>
          );
        } else {
          return (
            <Menu.Item key={e.link} className={s.Menu} icon={e.icon ? Navicon(e.icon) : ''}>
              <Link to={e.link}>{e.title}</Link>
            </Menu.Item>
          );
        }
      })}
    </Menu>
  );
}
export default withRouter(Nav);
